<template>
  <div class="mine">
    <div class="top">
      <img class="img-right" src="../assets/xinxi.png" alt="" />
    </div>
    <div class="mine-img"  ref="mineimg">
      <div class="left-img">
        <img class="nobook-img2" v-if="flag" src="../assets/touxiang.jpg" alt="">
        <img class="nobook-img" v-else src="../assets/nobook.png" alt="" />
      </div>
      <div class="right-txt" v-if="flag == false" @click="gotoLogin">
        <div class="login">点击登录</div>
        <div class="login-tip">
          登录即可全场免费读<span class="tip-red">5天</span>
        </div>
      </div>
    </div>
    <div class="content-box">
      <div class="content-left">
        <div class="content-left-top">余额</div>
        <div class="content-left-center">充值送红包</div>
        <div class="content-left-bottom">充值</div>
      </div>
      <div class="content-left">
        <div class="content-left-top">签到</div>
        <div class="content-left-center">做任务领红包</div>
        <div class="content-left-bottom-right">签到</div>
      </div>
    </div>
    <div class="footer">
      <div
        class="cell-list-item"
        v-for="(item, index) in cellListData"
        :key="index"
      >
        <van-cell icon="shop-o" :title="item.title" is-link>
          <template #icon>
            <img class="img2" :src="item.activeIcon" alt="">
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mine",
  data() {
    return {
      cellListData: [
        {
          title: "笔记",
          activeIcon: require("../assets/bijiben.png"),
          routeName: "Account",
        },
        {
          title: "已购和上传",
          activeIcon: require("../assets/shangchuan.png"),
          routeName: "Order",
        },
        {
          title: "在线客服",
          activeIcon: require("../assets/zaixiankefu.png"),
          routeName: "Like",
        },
        {
          title: "夜间模式",
          activeIcon: require("../assets/yejian.png"),
          routeName: "MyAddress",
        },
        {
          title: "积分商城",
          activeIcon: require("../assets/jifen.png"),
          routeName: "AllServe",
        },
        {
          title: "设置",
          activeIcon: require("../assets/shezhi.png"),
          routeName: "AllServe1",
        },
      ],
      flag:false,
    };
  },
  created() {
      this.getCodeYes()
  },
  methods:{
      gotoLogin() {
          this.$router.push({name:'Login'})
      },
      getCodeYes() {
          let userInfo = localStorage.getItem("codeyes");
          if(!userInfo){
              this.flag = false;
            //   console.log('1111');
          }else{
              this.flag =true;
              this.$nextTick(() => {
                  this.$refs.mineimg.style.justifyContent = 'center'
              })
          }
      }
  }
};
</script>

<style lang="less" scoped>
.top {
  display: flex;
  justify-content: flex-end;
  .img-right {
    margin-right: 10px;
  }
}
.mine-img {
  display: flex;
//   justify-content: center;
  .left-img {
    margin-left: 10px;
    border-radius: 50%;
    background-color: gainsboro;
    width: 80px;
    height: 80px;
    text-align: center;
    .nobook-img {
      width: 45px;
      height: 45px;
      margin-top: 17.5px;
    }
  }
  .right-txt {
    margin-left: 10px;
    .login {
      font-size: 18px;
      margin-top: 15px;
    }
    .login-tip {
      color: darkgray;
    }
    .tip-red {
      color: #e4393c;
    }
  }
}
.content-box {
  display: flex;
  margin-top: 25px;
  padding: 5px 0px 10px;
  text-align: center;
  // width: 177px;
  box-shadow: 0px 4px 5px #ccc;
  .content-left {
    flex: 1;
    div {
      margin-bottom: 3px;
    }
    .content-left-top {
      font-size: 13.5px;
    }
    .content-left-center {
      font-size: 11px;
      color: darkgray;
    }
    .content-left-bottom {
      // border: 1px solid black;
      border-radius: 15px;
      width: 65px;
      height: 25px;
      margin: 0 auto;
      background-color: #e4393c;
      line-height: 25px;
      color: white;
    }
    .content-left-bottom-right {
      border: 1px solid #e4393c;
      border-radius: 15px;
      width: 65px;
      height: 25px;
      margin: 0 auto;
      line-height: 25px;
      color: #e4393c;
    }
  }
  .content-left:nth-child(1) {
    border-right: 1px solid lightgrey;
  }
}
.footer {
  margin-top: 20px;
  height: 380px;
  background-color: white;
}

.img2{
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.nobook-img2{
    width: 80px;
      height: 80px;
      border-radius: 50%;
    //   margin-top: 5px;
}
</style>